<template>
	<div class="buy">
		<div class="inputLabel">
			<span class="label">{{Lang.buy[lang][0]}}:</span>
			<input type="number" v-model="buyNumber">
		</div>
		<div class="inputLabel">
			<span class="label">{{Lang.buy[lang][1]}}:</span>
			<input type="password" v-model="tradPwd">
		</div>
		<div class="inputBtn" @click="e_doBuy" v-if="$store.state.user.signed">
			<span>{{Lang.buy[lang][2]}}</span>
		</div>
		<div class="inputBtn" @click="e_dologin" v-if="!$store.state.user.signed">
			<span>{{Lang.buy[lang][3]}}</span>
		</div>

		<hb-dialog v-if="showMsg"
				   @clk="msgBack = ''">
			<h3 class="msg"
				v-text="msgBack" />

		</hb-dialog>
	</div>
</template>

<script>
	import eventsVue from '../events'
	import {vpost, imgpost, kpost, vlink, klink} from '@api'
	import Lang from '../lang'
	export default {
		name: '',
		data() {
			return {
				buyNumber:'',//购买数量
				tradPwd:'',//交易密码
				rengouID:'',
				msgBack: '',
				Lang,
			}
		},

		components: {},

		computed: {
			showMsg() {
				return this.msgBack !== ''
			},
			lang() {
				return this.$store.state.setting.lang
			},
		},

		methods: {
			/**
			 * @Description: ${获取认购轮ID}
			 * @Param
			 * @Return
			 * @Author 焦政
			 * @Date 2018/12/3
			 * @Version 1.0
			 */
			getSubId() {
				eventsVue.$on('getID',re=>{
					this.rengouID = re
				})
			},
			/**
			 * @Description: ${购买}
			 * @Param
			 * @Return
			 * @Author 焦政
			 * @Date 2018/12/12
			 * @Version 1.0
			 */
			e_doBuy(){
				let buyParams = {
					tradeAmount:this.buyNumber,
					tradePwd:this.tradPwd,
					coinid:this.rengouID
				}
				if(buyParams.tradeAmount == ''){
					this.msgBack = '请输入购买数量'
					return
				}
				if(buyParams.tradePwd == ''){
					this.msgBack = '请输入交易密码'
					return
				}
				vpost(vlink.subscriptionCenter.doBuy,buyParams).then(re=>{
					console.log('购买结构',re)
					if(re.code == 0){
						this.msgBack = '购买成功'
						this.buyNumber = ''
						this.tradPwd = ''
						eventsVue.$emit('dobuy',true)
					}else{
						this.msgBack(re.msg)
					}
				})
			},
		//	登录
			e_dologin(){
				this.$router.push('/signin')
			}
		},

		mounted() {
			this.getSubId()
		},
	}
</script>

<style scoped>
	.buy {
		width: 100%;
		height: auto;
		background-color: #181b2a;
		display: flex;
		flex-direction: column;
		align-items: center;
		padding-top: 10px;
	}

	.inputLabel {
		width: 350px;
		height: 50px;
		margin-bottom: 10px;
		display: flex;
		flex-direction: row;
		color: white;
	}

	.inputBtn {
		width: 340px;
		height: 50px;
		margin-bottom: 10px;
		display: flex;
		flex-direction: row;
		color: white;
		justify-content: center;
		line-height: 50px;
		border-radius: 6px;
		background-color: #66ccff;
		cursor: pointer;
		transition: all 0.5s;
	}

	.inputBtn:hover {
		transform: scale(1.05);
	}

	.label {
		width: 110px;
		height: 50px;
		line-height: 50px;
		display: inline-block
	}

	.inputLabel input {
		width: 100%;
		border-radius: 4px;
		font-size: 16px;
		outline: none;
		color: #66ccff;
		line-height: 50px;
		padding: 0 8px;
	}

	input::-webkit-outer-spin-button,
	input::-webkit-inner-spin-button {
		-webkit-appearance: none;
	}

	input[type="number"] {
		-moz-appearance: textfield;
	}
	.msg {
		margin: 20px;
		color: var(--clr0);
	}
</style>
